<template>
  <div class="container">
    <div class="shiti">试题录入</div>
    <!-- table表格 -->
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addFormRef"
      label-width="100px"
    >
      <el-form-item label="学科 ：" prop="id" class="xuekeyangs">
        <el-select
          placeholder="请选择"
          v-model="addForm.id"
          class="qwe"
          @change="xueTS(addForm.id)"
        >
          <el-option
            :label="item.subjectName"
            :value="item.id"
            class="qwe"
            v-for="(item, index) in dataList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录 ：" prop="id1" class="qwe">
        <el-select v-model="addForm.index" placeholder="请选择" class="qwe">
          <el-option
            v-for="(item, index) in datacatalogue"
            :label="item.directoryName"
            :value="item.id"
            class="qwe"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业 ：" prop="id2">
        <el-select v-model="addForm.value" placeholder="请选择" class="qwe">
          <el-option
            :label="item.company"
            :value="item.id"
            class="qwe"
            v-for="(item, index) in enterprise"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市 ：" prop="city">
        <el-col :span="4">
          <el-form-item prop="province">
            <el-select
              v-model="addForm.province"
              @change="shijian(addForm.province)"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in province"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item prop="city2">
            <el-select v-model="addForm.city" placeholder="请选择">
              <el-option
                :value="item"
                :label="item"
                class="qwe"
                v-for="(item, index) in city"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="方向 ：" prop="direction">
        <el-select v-model="addForm.direction" placeholder="请选择" class="qwe">
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in direction"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="题型 ：" prop="subjectID">
        <el-radio-group v-model="addForm.questionType" @change="shang">
          <el-radio
            :label="item.value"
            v-for="(item, index) in questionType"
            :key="index"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度 ：" prop="subjectID">
        <el-radio-group v-model="addForm.difficulty" @change="xia">
          <el-radio
            :label="item.value"
            v-for="(item, index) in difficulty"
            :key="index"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <!-- 富文本编译器 -->
      <el-form-item label="题干 ：" prop="question">
        <quill-editor v-model="addForm.question"></quill-editor>
      </el-form-item>
      <!-- 选项 功能-->

      <el-form-item :label="this.addForm.questionType < 3 ? '题干：' : ''">
        <!-- 选择 解析视频 -->
        <!-- 单选 -->
        <one
          v-if="this.addForm.questionType === 1"
          :options="addForm.options"
          @addSelect="addSelect"
        ></one>

        <!-- 多选 -->
        <more
          v-else-if="this.addForm.questionType === 2"
          :options="addForm.options"
          @addSelect="addSelect"
        ></more>
        <!-- 简答 -->
        <!-- <short></short> -->
      </el-form-item>
      <!-- 选项 功能 -->
      <el-form-item label="解析视频：">
        <el-radio-group>
          <el-input v-model="addForm.input" class="xiamiande"></el-input>
        </el-radio-group>
      </el-form-item>
      <!-- 富文本编译器 2-->
      <el-form-item label="答案解析 ：" prop="answer">
        <quill-editor v-model="addForm.answer" class="fuwenb"></quill-editor>
      </el-form-item>
      <!-- 富文本编译器 2-->
      <el-form-item label="题目备注">
        <el-input type="textarea" v-model="addForm.remarks"></el-input>
      </el-form-item>
      <el-form-item label="试题标签：">
        <el-select v-model="addForm.tags" multiple placeholder="请选择">
          <el-option
            v-for="(item, index) in Label"
            :key="index"
            :label="item.tagName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 提交 -->
      <el-form-item label="">
        <el-button
          type="success"
          round
          @click="modification"
          v-if="qwerrrr == true"
          >确认修改</el-button
        >
        <el-button type="primary" round @click="checkout" v-else
          >确认添加</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { list } from "../../api/hmmm/subjects";
import { list as ming } from "../../api/hmmm/directorys";
import { list as firm } from "../../api/hmmm/companys";
import { provinces, citys } from "../../api/hmmm/citys";
import { direction, questionType, difficulty } from "../../api/hmmm/constants";
import { add } from "../../api/hmmm/questions";
import { detail } from "../../api/hmmm/questions"; //跳转修改
import { update as dalitiD } from "../../api/hmmm/questions"; //修改
import { list as simple } from "../../api/hmmm/tags"; //标签
import one from "./components/one.vue";
import more from "./components/more.vue";
export default {
  name: "testcom",
  components: { one, more },
  data() {
    return {
      qwerrrr: false,
      dataList: [],
      datacatalogue: [],
      enterprise: [],
      province: [],
      city: [],
      direction: [],
      questionType: [],
      difficulty: [],
      Label: [],
      addForm: {
        id: "",
        index: "",
        value: "",
        catalogID: "",
        subjectID: "", //学科
        enterpriseID: "", //企业简称
        direction: "", //方向
        province: [], //企业所在地省份
        city: [], //企业所在城市
        //商品的详情介绍 题干
        question: "",
        // 题目备注
        remarks: "",
        // 题型
        questionType: 1,
        // 难度
        difficulty: 1,
        // 答案解析
        answer: "",
        tags: [],
        options: [
          { code: "A", title: 1, img: "", input: "", isRight: false },
          { code: "B", title: 2, img: "", input: "", isRight: false },
          { code: "C", title: 3, img: "", input: "", isRight: false },
          { code: "D", title: 4, img: "", input: "", isRight: false },
        ],
        // question:'',
        isFrontDisplay: "0",
        // subjectName: "1",
      },
      // 修改的id号
      IdTs: 53,

      addFormRules: {
        id: [{ required: true, message: "请选择学科", trigger: "blur" }],
        id1: [{ required: true, message: "请选择目录", trigger: "blur" }],
        id2: [{ required: true, message: "请选择企业", trigger: "blur" }],
        province: [{ required: true, message: "请选择地区", trigger: "blur" }],
        city: [{ required: true, message: "请选择学科", trigger: "blur" }],
        // city2: [{ required: true, message: "请选择地区", trigger: "blur" }],
        direction: [{ required: true, message: "请选择方向", trigger: "blur" }],
        question: [{ required: true, message: "请输入题干", trigger: "blur" }],
        answer: [{ required: true, message: "请输入题干", trigger: "blur" }],
      },
    };
  },

  props: {},
  computed: {},
  watch: {},
  created() {
    if (this.$route.query && this.$route.query.id) {
      this.utsh(this.$route.query.id);
      this.qwerrrr = true;
      console.log("拿到id");
    }
    this.dataName();

    this.qiyie();
    this.shengfeng();
    this.fangxiang();
    this.tixing();
    this.nandu();
  },
  mounted() {},
  methods: {
    xueTS(value) {
      this.addForm.index = "";
      this.addForm.tags = "";
      this.catalogue(value);

      this.biaoqian(value);
    },

    // 学科
    async dataName() {
      console.log(this.addForm.id);

      const { data: res } = await list();
      // console.log(res);
      this.dataList = res.items;
    },
    // 目录
    async catalogue(value) {
      console.log(this.addForm.index);
      this.addForm.catalogID = this.addForm.index;
      const { data: res } = await ming({ subjectID: value });
      this.datacatalogue = res.items;
      console.log(res.items);
    },
    // 企业
    async qiyie() {
      const { data: res } = await firm();
      // console.log(res);
      this.enterprise = res.items;
    },
    // 省份区域
    shengfeng() {
      // console.log(provinces);
      const data = provinces();
      this.province = data;
      // console.log(this.addForm.province);
    },
    // 省份改变事件
    shijian(itemTs) {
      console.log(itemTs);

      if (itemTs === this.addForm.province) {
        const data = citys(this.addForm.province);
        // console.log(data);
        this.city = data;
      } else {
        this.city = "";
        this.addForm.citys = "";
      }
    },
    // 方向
    fangxiang() {
      this.direction = direction;
    },
    // 题型
    tixing() {
      const data = questionType;
      this.questionType = data;
      // console.log(this.questionType);
    },
    // 难度
    nandu() {
      const data = difficulty;
      this.difficulty = data;
      // this.addForm.difficulty
    },

    // 点击题型数字下标
    shang() {
      console.log(this.addForm.questionType);
    },
    // 点击难度数字下标
    xia() {
      console.log(this.addForm.difficulty);
    },
    // 标签添加
    async biaoqian(value) {
      const data = await simple({ subjectID: value });

      this.Label = data.data.items;
      // console.log(data.data.items);
    },
    // 确认与校验
    async checkout() {
      this.catalogue();
      this.addForm.subjectID = this.addForm.id;
      this.addForm.enterpriseID = this.addForm.value;

      console.log(this.addForm.index);
      console.log(this.addForm.catalogID);
      console.log(this.addForm.subjectID);

      // this.$refs.addFormRef.validate();
      // this.$refs.addFormRef.validate(async (valid) => {
      //   if (valid) {
      //     this.addForm.subjectID = this.addForm.id;
      //     console.log(this.addForm);
      //     const { data } = await add(this.addForm);
      //     console.log(data);
      //     this.$message.success("添加成功");
      //     this.$router.push("questions");
      //     this.$router.push("/questions/list");
      //   } else {
      //     this.$message.error("添加失败请填写完整");
      //     return false;
      //   }
      // });
      // this.$refs.addFormRef.validate();
      this.addForm.subjectID = this.addForm.id;
      console.log(this.addForm);
      const { data } = await add({
        subjectID: this.addForm.subjectID,
        catalogID: 12,
        enterpriseID: this.addForm.enterpriseID,
        city: this.addForm.city,
        direction: this.addForm.direction,
        questionType: this.addForm.questionType + "",
        difficulty: this.addForm.difficulty + "",
        question: this.addForm.question,
        answer: this.addForm.answer,
        options: this.addForm.options,
        province: this.addForm.province,
      });
      console.log(data);
      this.$message.success("添加成功");
      this.$router.push("questions");
      this.$router.push("/questions/list");
    },
    // 添加选项与答案
    addSelect() {
      const arr = [
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ];
      const length = this.addForm.options.length - 4;
      const selectedItem = {
        code: arr[length],
        title: arr[length],
        img: "",
        isRight: false,
      };
      this.addForm.options.push(selectedItem);
    },
    // 基础题库的修改
    async modification() {
      const data = await dalitiD(this.addForm);
      console.log(data);
      // {
      //         id: this.IdTs,
      //         catalogID: 21,
      //         subjectID: 21,
      //         enterpriseID: 2,
      //         city: "[]",
      //         direction: "ss",
      //         questionType: "1",
      //         difficulty: "1",
      //         question: "ss",
      //         options: [],
      //         answer: "ss",
      //       }
      // this.addForm.answer = data.answer;
      this.$router.push("/questions/list");
    },
    async utsh(id) {
      const { data: res } = await detail({
        id,
      });
      console.log(res);
      this.addForm = res;
    },
  },
};
</script>

<style scoped lang='less' >
.container {
  .shiti {
    margin-left: 12px;
    border-bottom: 1px solid red;
    padding-bottom: 12px;
  }
  .xuekeyangs {
    margin-top: 12px;
  }
  /deep/.qwe {
    width: 390px;
  }
  .fuwenb {
    // height: 180px;
    width: 900px;
    font-size: 12px;
  }
  /deep/.ql-editor {
    height: 180px;
  }
  .btnAdd {
    margin-top: 15px;
  }
  /deep/.el-textarea__inner {
    width: 400px;
    height: 80px;
    background-color: rgb(233, 233, 233);
  }
  .xiamiande {
    width: 400px;
  }
}
</style>
